<template>
  <div class="bigBody" v-if="!isLoading" :style="bgStyle">
    <div class="loginBody">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="账号">
            <el-input v-model="form.accountNumber"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="form.accountPassword"
              auto-complete="off"
              type="password"
              show-password
              @keyup.enter.native="onSubmit"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="buttonOn">
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </div>
      </div>
    </div>
  </div>

  <!-- 加载中效果 -->
  <div v-else class="loading-container">
    <div class="loader"></div>
    <div class="loading-text">加载中...</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const img = new Image();
    img.src = require("@/assets/joker.jpg");
    img.onload = () => {
      this.isLoading = false; // 图片加载完成
    };
    img.onerror = () => {
      this.isLoading = false; // 图片加载失败
      // 处理错误
    };
  },

  data() {
    return {
      isLoading: true, // 初始状态为加载
      bgStyle: {
        backgroundImage: `url(${require("@/assets/joker.jpg")})`,
      },
      form: {
        accountNumber: "",
        accountPassword: "",
      },
    };
  },

  methods: {
    async onSubmit() {
      let res = await this.$api.login(this.form);
      console.log(JSON.stringify(res.data));

      if ("200" == res.data.code) {
        this.$router.push({ name: "home", params: { id: res.data.data } });
        console.log("登录成功");
      } else {
        console.log("账号密码错误");
        this.$message({
          type: "info",
          message: "账号密码有误",
        });
      }
    },
  },
};
</script>

<style lang="css" scoped>
/* 页面背景效果 */
.bigBody {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20% 35%;
  background-image: url('@/assets/joker.jpg'); /* 背景图 */
}

/* 登录表单样式 */
.loginBody {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  width: 400px;
}

/* 登录按钮容器 */
.buttonOn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 加载中效果 */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader {
  border: 16px solid #f3f3f3; /* 背景颜色 */
  border-top: 16px solid #3498db; /* 动画颜色 */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

.loading-text {
  color: white;
  font-size: 24px;
  font-family: 'Arial', sans-serif;
  margin-top: 20px;
  animation: textGlow 1.5s ease-in-out infinite alternate;
}

/* 旋转动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 文本光效动画 */
@keyframes textGlow {
  0% {
    text-shadow: 0 0 5px #fff, 0 0 10px #3498db, 0 0 20px #3498db, 0 0 30px #3498db;
  }
  100% {
    text-shadow: 0 0 10px #fff, 0 0 20px #3498db, 0 0 30px #3498db, 0 0 40px #3498db;
  }
}
</style>
